<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title> 九九乘法表-兵兵</title>
		<meta name="description" content="">
		<meta name="keywords" content="">

		<style type="text/css">
			body{margin: 0;}
			.wrap{
				margin: 10px;
				font-size: 0;
			}
			.wrap span{
				display: inline-block;
				width: 80px;
				line-height: 35px;
				text-align: center;
				margin: 5px;
				font-size: 16px;
				border: 1px solid #ccc;
				background: #eee;
			}
		</style>
		
	</head>
	<body>
	    <div class="wrap">
	    	<!-- <span>6×6=66</span> -->
	    </div>

		<script>
			var oDiv = document.getElementsByTagName('div')[0];

			// 第一个乘法表
			for(var i = 1; i <= 9; i++){
				for(var j = 1; j <= i; j++){
					oDiv.innerHTML += '<span>' + i + '×' + j + '=' + i*j + '</span>'
				}
				oDiv.innerHTML += '<br/>';
			}
			oDiv.innerHTML += '<hr/>';

			// 第二个乘法表
			for(var i = 1; i <= 9; i++){
				for(var j = i; j <= 9; j++){
					oDiv.innerHTML += '<span>' + i + '×' + j + '=' + i*j + '</span>'
				}
				oDiv.innerHTML += '<br/>';
			}
			oDiv.innerHTML += '<hr/>';

			// 第三个乘法表
			for(var i = 9; i > 0; i--){
				for(var j = 1; j <= i; j++){
					oDiv.innerHTML += '<span>' + i + '×' + j + '=' + i*j + '</span>'
				}
				oDiv.innerHTML += '<br/>';
			}
			oDiv.innerHTML += '<hr/>';

			// 第四个乘法表
			for(var i = 9; i > 0; i--){
				for(var j = i; j <= 9; j++){
					oDiv.innerHTML += '<span>' + i + '×' + j + '=' + i*j + '</span>'
				}
				oDiv.innerHTML += '<br/>';
			}
			oDiv.innerHTML += '<hr/>';

		</script>

	</body>
</html>